<template>
<el-row>
  <el-col :span="12" style="margin-top:15px">
    <el-image src="/src/assets/ad.png"/>

  </el-col>
  <el-col :span="12">
    <el-form   class="regForm">
      <h1>用户注册</h1>
      <el-form-item label="用户名">
        <el-input prefix-icon="User" placeholder="请输入用户名" v-model="userinfo.username"/>
      </el-form-item>
      <el-form-item label="密码">
        <el-input type="password" prefix-icon="Key" placeholder="请输入密码" v-model="userinfo.password"/>
      </el-form-item>
      <el-form-item label="验证码">
        <el-input style="width: 130px; margin-right: 5px" v-model="userinfo.captchaInput" placeholder="请输入验证码" />
        <el-image :src="imageBase64Data" @click="getCatecha" />
      </el-form-item>
      <el-form-item >
        <el-button type="primary" class="regBtn" @click="reg()">注册</el-button>
        <el-button class="regBtn">返回登录</el-button>
      </el-form-item>
    </el-form>
  </el-col>
</el-row>
</template>

<script setup>
import userApi from "@/api/userApi.js";
import {ref} from "vue";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";
const  router=useRouter();
const imageBase64Data =ref(null)
// const captcha=ref("");
//用户注册信息
const userinfo = ref({
  username:'',
  password:'',
  key:'',
  captchaInput:''
})
function getCatecha(){
  userApi.captcha()
      .then(resp => {
        userinfo.value.key=resp.data.key
        imageBase64Data.value=resp.data.imageBase64Data
      })
}
//用户注册
function reg(){
  userApi.reg(userinfo.value)
      .then(resp => {
        if (resp.code == 10000){
          ElMessage.success(resp.msg)
          router.push("/user/login");
        }else {
          ElMessage.error(resp.msg)

        }
      })

}

getCatecha();
//    .regForm{
//   width: 400px;
//   margin: 0 100px;
// }
//.regForm h1{
// text-align: center;
// margin-bottom: 20px;
//}
//.regBtn{
//  width: 45%;
//}
</script>
<style scoped>
.el-row {
  display: flex;
  justify-content: center;
  align-items: center;
  border: none; /* 移除边框 */
  margin: 10px auto; /* 调整外边距 */
  width: 100%; /* 宽度设为100%，但内容会居中 */
  max-width: 1200px; /* 最大宽度限制 */
  height: auto; /* 高度自适应 */
  /* 修改背景色为线性渐变 */
  background: linear-gradient(to right, #ffffff, var(--theme-color)); /* 从左到右的渐变，从#f0f2f5到#c0c4cc */
  padding: 20px; /* 添加内边距 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  border-radius: 10px; /* 添加圆角 */
}
.regForm {
  width: 400px;
  margin: 0 100px;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background: linear-gradient(135deg, #ff7e5f, #feb47b);
  color: #ffffff;
  font-family: 'Arial', sans-serif;
}

.regForm h1 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.el-form-item {
  margin-bottom: 20px;
}

.el-input {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.el-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.el-button {
  width: 45%;
  padding: 10px;
  border-radius: 8px;
  border: none;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.el-button.regBtn:first-of-type {
  background-color: #ff7e5f;
  margin-right: 5%;
}

.el-button.regBtn:first-of-type:hover {
  background-color: #feb47b;
}

.el-button.regBtn:last-of-type {
  background-color: #ffffff;
  color: #ff7e5f;
}

.el-button.regBtn:last-of-type:hover {
  background-color: #f2f2f2;
}

.el-image {
  display: inline-block;
  margin-left: 10px;
  vertical-align: middle;
}
</style>